<template>
    <div>
        <el-menu :default-active="$route.path" class="el-menu-vertical-demo" router>
            <div class="logo">
                <a href="http://music.quarkzhong.top/" target="_blank">
                    <div class="image"></div>
                </a>
            </div>
            <el-menu-item index="/index">
                <el-icon>
                    <HomeFilled />
                </el-icon>
                <span>首页</span>
            </el-menu-item>
            <el-menu-item index="/rank">
                <el-icon>
                    <Histogram />
                </el-icon>
                <span>排行榜</span>
            </el-menu-item>
            <el-menu-item index="/playlist">
                <el-icon>
                    <Headset />
                </el-icon>
                <span>歌单</span>
            </el-menu-item>
            <el-menu-item index="/mv">
                <el-icon>
                    <VideoCamera />
                </el-icon>
                <span>mv</span>
            </el-menu-item>
            <el-menu-item index="/user/home">
                <el-icon>
                    <UserFilled />
                </el-icon>
                <span>我的</span>
            </el-menu-item>
            <el-menu-item index="/kun/list">
                <el-icon>
                    <FolderChecked />
                </el-icon>
                <span>kun图</span>
            </el-menu-item>
        </el-menu>
    </div>
</template>

<script setup>

</script>

<style lang="less" scoped>
.el-menu {
    height: 100vh;
    width: 260px;

    .logo {
        overflow: hidden; //阻止盒模型塌陷
        padding: 0;
        display: flex;
        justify-content: center;
        align-items: center;

        .image {
            width: 100px;
            height: 100px;
            background: url(https://oss.haochongzb.com/zb/oss/net-easy/45eahsfwqee7eer7xcs8ds4aaaa.png) no-repeat center center;
            background-size: 100% 100%;
            margin: 30px auto;
        }
    }

    .el-icon {
        padding: 0 20px;
    }
}
</style>